<template>
    <div class="PersonalSettings">
        <el-form ref="user" :model="user" label-width="80px" :rules="rules">
            <el-form-item label-width="0">
                <el-image
                        style="width: 200px;margin: 10px auto;"
                        :src="user.userFace"
                        :preview-src-list="[user.userFace]">
                </el-image>
                <!--                <el-upload class="upload-demo"-->
                <!--                           :action="'timeapi/'+loginServiceApi+'/admin/userface'"-->
                <!--                           :headers="header"-->
                <!--                           :show-file-list="false"-->
                <!--                           :on-success="onSuccess"-->
                <!--                           :before-upload="beforeAvatarUpload">-->
                <el-button size="small" style="margin: auto;display:block" round
                           @click="headerSetting = true">更换头像
                </el-button>
                <!--                </el-upload>-->
            </el-form-item>
            <el-form-item label="昵称" prop="name">
                <el-input v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="介绍">
                <el-input type="textarea" v-model="user.remark"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="user.sex" style="margin: 9px 0px;float: left;">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                    <el-radio label="保密"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-date-picker
                        v-model="user.birthday"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="地区">
                <el-cascader
                        size="large"
                        :options="options"
                        v-model="user.address"
                        @change="handleChange">
                </el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit()">保存</el-button>
            </el-form-item>
        </el-form>

        <el-dialog
            :append-to-body="true"
            :close-on-click-modal="false"
            :visible.sync="headerSetting"
            width="40%">
              <header-setting/>
        </el-dialog>
    </div>
</template>

<script>

import {regionData} from "element-china-area-data";
import RichText from "@/views/home/compoents/compoents/richText1.vue";
import HeaderSetting from "@/views/modules/sys/sysAdmin/compoents/headerSetting.vue";
export default {
    components: {HeaderSetting, RichText},
    data() {
        return {
            //接口api
            api: this.$store.getters.app.api,
            //当前用户
            user: this.$store.getters.app.userInfo,
            //头像设置
            headerSetting:false,
            //放大查看的头像图片
            srcList: [
                this.$store.getters.app.userInfo.userFace
            ],
            //地址选项组件
            options: regionData,
            rules: {
                name: [
                    {required: true, message: '昵称不可为空', trigger: 'blur'}
                ],
            },
        }
    },
    methods: {
        handleChange(value) {
        },

        /**
         * 保存按钮
         */
        onSubmit() {
            this.$refs.user.validate(data => {
                if (data) {
                    let params = {
                        name:this.user.name,
                        remark:this.user.remark,
                        sex: this.user.sex,
                        birthday:this.user.birthday,
                        address:this.user.address
                    }
                    this.api.system.updateAdminInfo(params).then(res => {
                        if (res.code == 200) {
                            this.$message.success("修改成功！")
                            this.api.auth.setUserInfo(this.user)
                            this.$store.commit("app/setUserInfo", this.user)
                        }

                    })
                }
            })
        },
    }
}
</script>

<style scoped>

.PersonalSettings {
    width: 100%;
    height: 100%;
    margin: auto;
    background: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 26%)
}

::v-deep .el-tabs--border-card {
    background: #FFF;
    border: 0px solid #DCDFE6;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 12%), 0 0 0px 0 rgb(0 0 0 / 4%);
}

::v-deep .el-tabs--border-card > .el-tabs__header {
    background-color: #F5F7FA;
    border: 1px solid #E4E7ED;
    margin: 0;
}

::v-deep .el-image {
    position: relative;
    display: block;
}

::v-deep .el-form-item__content {
    display: block;
}
</style>